import React, { Component } from 'react';
import { NavBar, Form, Input, Button, Toast } from 'antd-mobile';
import service from '../../api'
class UserSet extends Component<any, any> {
    back() {
        this.props.history.replace('/index/mine')
    }
    onFinish(vals: any) {
        vals.userid = localStorage.getItem('userid')
        service.user.bindUsername(vals).then(res => {
            console.log(res)
            if (res.data.code === '200') {
                Toast.show({
                    content: '绑定用户名成功'
                })
                setTimeout(() => {
                    this.props.history.replace('/index/mine')
                }, 1000);
            }
        })
    }
    render() {
        return (
            <div className='userset'>
                <header>
                    <NavBar onBack={() => { this.back() }}>绑定用户名</NavBar>
                </header>
                <Form
                    onFinish={(vals) => { this.onFinish(vals) }}
                    footer={
                        <Button block type='submit' color='primary' size='large'>
                            提交
                        </Button>
                    }
                >
                    <Form.Header>绑定用户名</Form.Header>
                    <Form.Item
                        name='username'
                        label='用户名'
                        rules={[
                            { required: true },
                        ]}
                    >
                        <Input placeholder='请输入用户名' />
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default UserSet;